<template>
  <!-- 编辑其他成本 -->
  <el-dialog class="pick-dialog" title="其他成本" :visible.sync="dialogVisible" :close-on-click-modal="false" width="800px">
    <div class="form-box">
      
      <el-descriptions v-if="orderInfo" style="margin-top: 15px;" title="订单信息" labelClassName="label-txt" border :column='3'>
       <el-descriptions-item label-class-name="itemlabel" label="订单编号" :span="3">{{ orderInfo.no }}</el-descriptions-item>
       <el-descriptions-item label-class-name="itemlabel" label="游戏" >{{ orderInfo.gameName }}</el-descriptions-item>
       <el-descriptions-item label-class-name="itemlabel" label="商品编号" >{{ orderInfo.goodsId }}</el-descriptions-item>
       <el-descriptions-item label-class-name="itemlabel" label="游戏账号" >{{ orderInfo.accountNumber }}</el-descriptions-item>
       <el-descriptions-item label-class-name="itemlabel" label="实付金额" >{{ orderInfo.actualAmount }}</el-descriptions-item>
     </el-descriptions>
     <div style="margin-bottom:15px;"></div>
     <div class="tip" style="color:#999;margin-bottom: 10px;">
        提示：计算订单利润时会将其他成本计为成本，利润=实付金额-成本-其他成本
      </div>
      <el-form :model="ruleForm" ref="ruleForm" :inline="true" label-width="auto" :rules="rules" class="demo-ruleForm new_form_box">
        <el-form-item class="row" label="其他成本:" prop="otherFee">
          <div class="other_fee_box">
            <div class="baopei_item flex alc" v-for="(item,i) in otherFeeArr" :key="i">
              <label>
                <span>成本名称：</span>
                <el-input style="width:150px" type="text" maxlength="6" v-model="item.name" placeholder="成本名称,最多6字"></el-input>
              </label><br />
              <label>
                <span>金额：</span>
                <el-input style="width:150px" type="text" v-model="item.price" placeholder="请输入成本金额">
                  <i slot="suffix" >元</i>
                </el-input>
              </label><br />
              <i class="el-icon-delete" @click="removeOtherFee(i)"></i>
            </div>
            <div class="center">
              <el-button type="primary" icon="el-icon-plus" plain @click="addOneOtherFee">添加</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>

      <div class="center bot">
        <el-button @click="close('ruleForm')">关闭</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import orderApi from "@/api/pickUp/order";
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      ruleForm: {
        id: "",
        otherFee:''
      },
      rules: {
      
      },
      orderInfo:'',
      otherFeeArr:[
        {
          name:'',
          price:''
        }
      ]
    };
  },
  created() {},
  methods: {
    open(order) {
      this.orderInfo = order
      this.otherFeeArr = [{
            name:'',
            price:''
          }]
      this.loading = false;
      this.ruleForm.id = order.id;
      if(order.otherFee){
        this.otherFeeArr = JSON.parse(order.otherFee)
      }
      this.dialogVisible = true;
    },
   
    // 添加一条成本
    addOneOtherFee() {
      this.otherFeeArr.push({
        name: "",
        price: ""
      });
    },
    // 删除一条包赔
    removeOtherFee(i) {
      if (this.otherFeeArr.length >= 1) {
        this.otherFeeArr.splice(i, 1);
      }
    },
    
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 校验其他成本是否填写完整
          this.ruleForm.otherFee = ''
          const otherFeeArr = []
          if(this.otherFeeArr&&this.otherFeeArr.length){
            this.otherFeeArr.forEach(r=>{
              if(r.price){
                if(!this.priceReg.test(r.price)){
                  return this.$message.error('其他成本金额格式错误！')
                }
                otherFeeArr.push(r)
              }
            })
          }
          if(otherFeeArr.length){
            this.ruleForm.otherFee = JSON.stringify(otherFeeArr)
          }
          this.loading = true;
          orderApi.changeOrderInfo(this.ruleForm).then((res) => {
            this.dialogVisible = false;
            this.loading = false;
            if (res.code == 200) {
              this.$parent.getList();
            }
          });
        } else {
          //console.log("error submit!!");
          return false;
        }
      });
    },
    close(formName) {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.form-box {
  min-height:500px;
}

.bot {
  margin-top: 15px;
}

.other_fee_box{
  // background: #fff;
  // width: 535px;
  // padding: 10px;
  padding-left: 30px;
  padding-bottom: 10px;
  .baopei_item{
    border-radius: 10px;
    padding: 10px 15px;
    background-color: #fff;
    margin-bottom: 10px;
    label{
      margin-right: 15px;
    }
    i{
      cursor: pointer;
    }
  }
}
::v-deep .other_fee_box .el-input{
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }
</style>
